前后端分离模式验证码的使用

2023-08-26 12:03| 来源: 网络整理| 查看: 265

前后端不分离

在前后端不分离的开发模式下。验证码的实现相对简单，因为前端向服务器端请求验证码之后直接将验证码存储在sesison中，用户在浏览器输入验证码之后，直接从sesion中取出判断即可。

前后端分离

前后端分离之后，由于出现了跨域。以及分不是开发session不能共享的问题，后端一般都是直接禁用session，使用redis来代替session的功能。

实现流程

1、前端发送请求来请求验证码（base64）

2、服务器端接收到用户验证码的请求之后，使用工具类来生成验证码（base64）

3、将获取到的验证码对应的code 保存到 redis 中并设置该码的有效时间，一般建议使用 UUID 作为key，code 做value 来进行保存。直接将验证码对应的 base64码和对应的UUID 响应给前端

4、前端输入完毕之后，发送登录请求时，将接收到的 UUID 作为参数一起携带到服务器端。

5、服务器端接收端到用户请求之后，根据携带来的UUID 从redis中取出对应的数据，再根据用户输入的code来进行判断是否相对即可

实现步骤：redis这里就不做说明了，直接使用springboot的 jedis 即可

1、引入hutool的验证码依赖

cn.hutool hutool-all 5.5.7

2、自定义一个用来保存验证码信息的实体类

package org.jcgl.entity; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; /** * 验证码对应实体类 */ @Data @NoArgsConstructor @AllArgsConstructor public class ImgResult { // 该验证码对应的UUID private String imgUUID; // 该验证码对应的 base64 加密格式 private String img; // 该验证码对应的具体的码 private String code; }

3、对应的验证码生成工具类

package org.jcgl.util; import cn.hutool.core.codec.Base64; import lombok.extern.slf4j.Slf4j; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.util.Random; /** * 〈一句话功能简述〉 * 〈〉 * * @author 1543057945 * @create 2019/1/11 * @since 1.0.0 */ @Slf4j public class CaptchaUtil { //验证码个数 private int count=4; //验证码宽度，且设置每个字的宽度 private int width=count*50; //验证码高度 private int height=50; //图片验证码key private String code=""; //bufferedImage private BufferedImage bufferedImage; public CaptchaUtil() { } public CaptchaUtil(int count, int width, int height) { this.count = count; this.width = width; this.height = height; } public int getCount() { return count; } public String getCode() { return code; } public int getWidth() { return width; } public int getHeight() { return height; } public void setCount(int count) { this.count = count; width=this.count*50; } public void setWidth(int width) { this.width = width; } public void setHeight(int height) { this.height = height; } //测试写入 public static void main(String[] args){ long startend=System.currentTimeMillis(); CaptchaUtil captchaUtil =new CaptchaUtil(); //默认验证码位数为4，我这里设为5 captchaUtil.setCount(5); //得到缓冲区 BufferedImage image = captchaUtil.getImage(); //得到真实验证码 String code= captchaUtil.getCode(); long endTime=System.currentTimeMillis(); System.out.println("验证码为："+code+"\n花费时间为："+(endTime-startend)+"\n到E盘根目录下看，文件名为11.jpg"); } public BufferedImage getImage(){ //图片缓冲区 BufferedImage image = new BufferedImage(width,height,1); //获得笔 Graphics graphics = image.getGraphics(); //设置初始画笔为白色 graphics.setColor(new Color(255,255,254)); //画满整个图，也就是把图片先变为白色 graphics.fillRect(0,0,width,height); Random rd=new Random(); //设置字体 Font font=new Font("宋体",Font.PLAIN,35+rd.nextInt(10)); graphics.setFont(font); char[] chars="qweCRYHrtasdfBxy678934VTGopNUFKuighjklzSXEDLOP12cvbnmQAZWJMI50".toCharArray(); //画验证码 for (int i = 0; i graphics.setFont(new Font("宋体",Font.PLAIN,15)); String string="."; graphics.setColor(new Color(rd.nextInt(255),rd.nextInt(255),rd.nextInt(255))); graphics.drawString(string,rd.nextInt(width),rd.nextInt(height)); } //干扰线 for (int i = 0; i String base64 = null; try { //输出流 ByteArrayOutputStream stream = new ByteArrayOutputStream(); ImageIO.write(image, "png", stream); base64 = Base64.encode(stream.toByteArray()); log.info("生成的图片验证码base64:{}",base64); } catch (IOException e) { log.error("生成生成的图片验证码base64失败：{}",e.getMessage()); e.printStackTrace(); } return base64; } }

4、前端发送 axios 请求来获取验证码

// 获取验证码 getCode() { // 请求后台验证码 throw axios.get("/captcha/getCaptcha",).then(res => { if (res.data.code === 0) { // 给图片的 src 赋值 this.codeImg = res.data.data.img; // 给 UUID 赋值 this.imgUUID = res.data.data.imgUUID; // this.code = res.data.data.code; console.log(this.code) } else { this.$message.error(res.data.msg) } }).catch(error => { alert("errorAjax") }) },

5、验证码的显示

6、后端的处理

// 获取验证码 @GetMapping("/getCaptcha") @ResponseBody public JsonResult getCaptcha() { //画图工具类 CaptchaUtil imageCode = new CaptchaUtil(); // 获取验证码对应的 base64 编码 String base64 = CaptchaUtil.getBase64(imageCode.getImage()); // 获取对应的验证码 code String code = imageCode.getCode(); // 生成 UUID String imgUUID = UUIDUtil.getUUIDString(); // 封装获取的验证码相关的数据到验证码对象中，并响应 ImgResult imgResult = new ImgResult(); imgResult.setImgUUID(imgUUID); imgResult.setImg(base64); imgResult.setCode(code); // 将验证码的信息保存到 redis中,并设置有效时间！ captchaCache.setEx(imgUUID, 60 * 2, code); // 将封装好的验证码对象响应给前端 return JsonResult.success(imgResult); }

【本文地址】

公司简介

联系我们